<template>
	<a-modal :width="500" :visible="visible" title="字幕设置" @ok="handleOk" @cancel="handleClose" centered>
		<div class="form_con">
			<div class="form_item">
				<div class="form_title">字幕</div>
				<a-switch style="margin-left: 20px;" v-model:checked="operateForm.open_subtitle" />
			</div>
			<div class="form_item" style="margin-top: 20px;">
				<div class="form_title">字体</div>
				<a-select @change="handleSelectChange" v-model:value="operateForm.material_url" style="width: 150px; margin-left: 20px;"
					placeholder="请选择字体" :options="typefaceOptions"></a-select>

				<a-select v-model:value="operateForm.font_size" style="width: 150px; margin-left: 15px;"
					placeholder="请选择字体大小" :options="fontsizeOptions"></a-select>
			</div>
			
			<div class="form_item" style="justify-content: flex-start;">
				<div class="form_title">左右对齐</div>
				<div class="align_type">
					<div class="type_item" @click="chooseAlignType(item.value, card_index)"
						:class="operateForm.align_type == item.value?'active':''"
						v-for="(item, index) in alignType" :key="index">
						<a-tooltip>
							<template #title>{{item.name}}</template>
							<cu-icon :type="item.icon" />
						</a-tooltip>
					</div>
				</div>
			
				<div class="form_title" style="margin-left: 10px;">上下对齐</div>
				<div class="align_type">
					<div class="type_item" @click="chooseVerticleType(item.value, card_index)"
						:class="operateForm.verticle_position == item.value?'active':''"
						v-for="(item, index) in verticleType" :key="index">
						<a-tooltip>
							<template #title>{{item.name}}</template>
							<cu-icon :type="item.icon" />
						</a-tooltip>
					</div>
				</div>
			</div>
			<div class="form_item" style="margin: 15px 0; justify-content: flex-start;">
				<div class="form_title">文字颜色</div>
				<color-picker v-model:hex="operateForm.color" :show-opacity="false" :btn-style="{
					width: '94px',
					height: '32px',
					marginLeft: '20px'
				}" />
				<div class="form_title">背景色</div>
				<color-picker v-model:hex="operateForm.backgroundColor" :show-opacity="false"
					:btn-style="{
					width: '94px',
					height: '32px',
					marginLeft: '10px'
				}" />
				<a-button v-show="operateForm.backgroundColor" type='link' @click="operateForm.backgroundColor = ''">清除背景色</a-button>
			</div>
			
			<div class="form_item" style="justify-content: flex-start">
				<div class="form_title">透明度</div>
				<div style="margin-left: 15px; width: 320px;">
					<a-row>
						<a-col :span="12">
							<a-slider v-model:value="operateForm.opacity" :min="0" :max="1" :step="0.01" />
						</a-col>
						<a-col :span="4">
							<a-input-number v-model:value="operateForm.opacity" :min="0"
								:max="1" :step="0.01" style="width: 150px;margin-left: 10px" />
						</a-col>
					</a-row>
				</div>
			</div>
			
			<div class="form_item" style="margin: 15px 0; justify-content: flex-start;">
				<div class="form_title">过度效果</div>
				<a-button @click="chooseTransition" style="width: 94px; margin-left: 20px;">选择</a-button>
				<div class="form_title">特效</div>
				<a-button @click="chooseSpecial" style="width: 94px; margin-left: 10px;">选择</a-button>
			</div>
			
			<div class="form_item" style="margin: 15px 4px; justify-content: flex-start; font-size: 12px; color: #2878FF; height: 23px;">
				<span style="margin-right: 10px; flex-shrink: 0;" v-if="operateForm.transitionKey['in']">淡入：{{matchData.transitions[operateForm.transitionKey['in']]}};</span>
				<span style="margin-right: 10px; flex-shrink: 0;" v-if="operateForm.transitionKey['out']">淡出：{{matchData.transitions[operateForm.transitionKey['out']]}};</span>
				<span v-if="operateForm.specialKey">特效：{{matchData.effects[operateForm.specialKey]}};</span>
			</div>
		</div>
		
		<transitionEffect @close="closeTansition" :visible="transitionVisible" :transitionKey="currentTransitionKey" />
		<specialEffects @close="closeSpecial" :visible="specialVisible" :specialKey="currentSpecialKey" />
	</a-modal>
</template>

<script>
	import transitionEffect from './transitionEffect.vue';
	import specialEffects from './specialEffects.vue';
	import matchData from '../js/match_data.js';
	import {
		defineComponent,
		reactive,
		toRefs,
		computed,
		watch,
		toRaw,
		createVNode,
		ref,
		nextTick,
	} from "vue";
	import {
		FolderAddOutlined,
		MinusOutlined,
		PlusOutlined,
		AlignCenterOutlined,
		AlignLeftOutlined,
		AlignRightOutlined
	} from "@ant-design/icons-vue";
	import {message} from 'ant-design-vue';
	import request from "../../../../../../common/utils/request";
	import store from '@/store';
	import ColorPicker from "colorpicker-v3";
	import "colorpicker-v3/style.css";
	export default defineComponent({
		props: {
			visible: {
				type: Boolean,
				default: false
			}
		},

		components: {
			FolderAddOutlined,
			MinusOutlined,
			PlusOutlined,
			AlignCenterOutlined,
			AlignLeftOutlined,
			AlignRightOutlined,
			ColorPicker,
			transitionEffect,
			specialEffects
		},

		setup(props, context) {
			const state = reactive({
				operateForm: {
					open_subtitle: true,
					font_family: null,
					font_size: 32,
					material_url: null,
					color: '#FFF000',
					backgroundColor: '',
					opacity: 1,
					align_type: 'center',
					verticle_position: 'center',
					transitionKey: {in: '', out: ''},
					specialKey: ''
				},
				currentTransitionKey: {in: '', out: ''},
				currentSpecialKey: '',
				transitionVisible: false,
				specialVisible: false,
				alignType: [{
					icon: 'icon-zuoduiqi',
					name: '左',
					value: 'left'
				}, {
					icon: 'icon-juzhongduiqi',
					name: '居中',
					value: 'center'
				}, {
					icon: 'icon-youduiqi',
					name: '右',
					value: 'right'
				}],
				verticleType: [{
					icon: 'icon-chuizhidingduiqi_duiqicaozuo_jurassic',
					name: '上',
					value: 'top'
				}, {
					icon: 'icon-chuizhijuzhongduiqi_duiqicaozuo_jurassic',
					name: '居中',
					value: 'center'
				}, {
					icon: 'icon-chuizhididuiqi_duiqicaozuo_jurassic',
					name: '下',
					value: 'right'
				}],
				typefaceOptions: [],
				fontsizeOptions: [{
					label: '12',
					value: 12
				},{
					label: '14',
					value: 14
				},{
					label: '18',
					value: 18
				},{
					label: '24',
					value: 24
				},{
					label: '32',
					value: 32
				},{
					label: '36',
					value: 36
				},{
					label: '44',
					value: 44
				},{
					label: '48',
					value: 48
				},{
					label: '64',
					value: 64
				},{
					label: '80',
					value: 80
				}],
			});
			const handleOk = () => {
				let obj = {
					open: state.operateForm.open_subtitle?1:0,
					font: state.operateForm.font_family,
					font_size: state.operateForm.font_size,
					material_url: state.operateForm.material_url,
					html: '<p>{{字幕效果}}</p>',
					css: `p {font-family: '${state.operateForm.font_family}','HappyZcool-2016';font-size:${state.operateForm.font_size};color: ${state.operateForm.color};background-color: ${state.operateForm.backgroundColor?state.operateForm.backgroundColor:'transparent'};opacity: ${state.operateForm.opacity};text-align: ${state.operateForm.align_type};}`,
					opacity: state.operateForm.opacity,
					color: state.operateForm.color,
					background: state.operateForm.backgroundColor,
					position: state.operateForm.align_type,
					verticle_position: state.operateForm.verticle_position,
					width: 180,
					height: 30
				}
				obj.config = {}
				obj.config['x'] = 0
				obj.config['y'] = 0
				obj.config['transition_in'] = state.operateForm['transitionKey']['in']
				obj.config['transition_out'] = state.operateForm['transitionKey']['out']
				obj.config['effect'] = state.operateForm['specialKey']
				obj.config['position'] = 'center'
				let params = {}
				Object.assign(params, store.getters.clipJSON?.script_data)
				params.subtitle_config = obj
				store.dispatch('SetScriptData', params)
				context.emit('close')
				message.success('设置成功！')
			}

			const handleClose = () => {
				context.emit('close')
			}
			
			const handleSelectChange = (value) => {
				let font_family = state.typefaceOptions.find(item=>item.material_url == value)?.font_family
				state.operateForm.font_family = font_family
			}
			
			const getFontClass = () => {
				state.typefaceOptions = []
				request.get('/work_ai', '/user/shotstack/material/fonts/list').then(res=>{
					res.result.map(item=>{
						item.label = item.name
						item.value = item.material_url
						item.font_family = item.font_family
						state.typefaceOptions.push(item)
					})
					if(!state.operateForm.material_url){
						state.operateForm.material_url = state.typefaceOptions.find(item=>item.label == '站酷快乐体').material_url
						state.operateForm.font_family = state.typefaceOptions.find(item=>item.label == '站酷快乐体').font_family
					}
				})
			}
			
			const chooseAlignType = (value, index) => {
				state.operateForm['align_type'] = value
			}
			
			const chooseVerticleType = (value, index) => {
				state.operateForm['verticle_position'] = value
			}
			
			const chooseTransition = () => {
				state.transitionVisible = true
				state.currentTransitionKey = JSON.parse(JSON.stringify(state.operateForm['transitionKey']))
			}
			
			const chooseSpecial = () => {
				state.specialVisible = true
				state.currentSpecialKey = JSON.parse(JSON.stringify(state.operateForm['specialKey']))
			}
			
			const closeTansition = (key) => {
				if(key && key!='close') {
					state.operateForm['transitionKey'] = key
				}
				state.transitionVisible = false
				state.currentTransitionKey = {in: '', out: ''}
			}
			
			const closeSpecial = (key) => {
				if(key && key!='close') {
					state.operateForm['specialKey'] = key
				}
				state.specialVisible = false
				state.currentSpecialKey = ''
			}

			watch(() => props.visible, val => {
				if(val){
					getFontClass()
					let subtitle_config = store.getters.clipJSON?.script_data?.subtitle_config
					state.operateForm.open_subtitle = subtitle_config?.open?true:false
					state.operateForm.font_family = subtitle_config?.font
					state.operateForm.font_size = subtitle_config?.font_size
					state.operateForm.material_url = subtitle_config?.material_url
					state.operateForm.opacity = subtitle_config?.opacity
					state.operateForm.color = subtitle_config?.color
					state.operateForm.backgroundColor = subtitle_config?.background
					state.operateForm.align_type = subtitle_config?.position
					state.operateForm.verticle_position = subtitle_config?.verticle_position
					state.operateForm['transitionKey']['in'] = subtitle_config?.config?.transition_in
					state.operateForm['transitionKey']['out'] = subtitle_config?.config?.transition_out
					state.operateForm['specialKey'] = subtitle_config?.config?.effect
					if(!subtitle_config?.background){
						state.operateForm.backgroundColor = '#ffffff'
						nextTick(()=>{
							state.operateForm.backgroundColor = ''
						})
					}
				}
			})
			
			return {
				...toRefs(state),
				handleOk,
				handleClose,
				handleSelectChange,
				chooseAlignType,
				chooseVerticleType,
				chooseTransition,
				chooseSpecial,
				closeTansition,
				closeSpecial,
				matchData
			}
		},
	});
</script>

<style lang="less" scoped>
	.form_con {
		.form_item {
			display: flex;
			align-items: center;
			margin-top: 10px;

			.form_title {
				width: 60px;
				flex-shrink: 0;
				display: flex;
				align-items: center;
				justify-content: flex-end;
			}
			
			.align_type {
				display: flex;
				align-items: center;
				justify-content: flex-start;
			
				.type_item {
					margin-left: 20px;
					font-size: 20px;
					cursor: pointer;
			
					&.active {
						color: #2878FF;
					}
			
					&:hover {
						color: #2878FF;
					}
				}
			}
		}
	}

	.random_title {
		display: flex;
		align-items: center;
	}

	.signature_con {
		display: flex;
		align-items: center;

		.signature_item {
			width: 50px;
			height: 50px;
			border-radius: 10px;
			margin-left: 5px;

			&:nth-child(1) {
				margin-left: 20px;
			}

			background-color: rgba(0, 0, 0, .1);
			display: flex;
			align-items: center;
			justify-content: center;
			cursor: pointer;
		}
	}
</style>